<template>
  <div id="wrap" :style="{ fontSize:fontSize + 'px' }">
    <div class="header" style="margin-top: -10px">
      <a @click="$router.push('/iwantstrategy')" class="repeat_"><i class="reIcon iconfont icon-shuaxinx"></i>重新运算</a>
      <div class="goBackBtn">
        <i @click="$router.push('/index')" class="iconfont icon-xiangzuo1"></i><a class="goBack" @click="$router.push('/index')">首页</a>
      </div>
      <div v-if="$store.state.networkState" class="level">
        <div v-if="process !== '100'" style="width: auto" class="processNum DBCProcess">
          <div>{{process | toDBC}}</div><sub>%</sub>
        </div>
        <div v-else class="processNum">
          <canvas id="canvas" height="100px" width="100px">
          </canvas>
          <i class="hookIcon iconfont icon-wancheng1"></i>       
        </div>
        <a v-if="process !== '100'">策略运算中...</a>
        <a v-else>最佳策略已生成</a>
      </div>
    </div>
    <v-networkerr 
      v-if="!$store.state.networkState"
      v-on:reload="reload"></v-networkerr>
    <div v-else class="content">
      <a>根据您的测评结果，向您推荐以下组合</a>
      <template v-if="process !== '100'">
        <div style="margin-top: 15%;display: flex;just-content: center">
          <spinner style="margin: 0 auto;opacity: 0.5" size="50px" type="dots" slot="value"></spinner>
        </div>
      </template>
      <template v-else>
        <scroller :height="-(fontSize * 26.5) + 'px'" lock-x ref="scroller">
        <div style="padding: 2px">
          <v-riskratingscard
          v-for="(item, idx) in recommend"
          :key="item.id"
          class="list-out-in"
          style="opacity: 0;transform: translate3D(50%, 0, 0)"
          :style="{ animationDelay : idx * 0.3 + 's' }"
          @click.native="gotoDetail(item)"
          :item="item">
          </v-riskratingscard>
        </div>
        </scroller>
      </template>
    </div>
  </div>
</template>

<script>
import { Spinner, Scroller } from 'vux'

export default {
  name: 'risk-ratings',
  components: {
    Spinner,
    Scroller
  },
  data () {
    return {
      fontSize: 10,
      riskLevel: {
        conservative : "保守",
        midConservative : "中等保守",
        balance : "平衡",
        midAggressive : "中等进取",
        aggressive : "进取"
      },
      recommend: [],
      level: '',
      process: 0
    }
  },
  watch: {
    process: function (val) {
      this.$nextTick(() => {
        if (val === '100') this.drawCircular()
      })
    }
  },
  methods: {
    findRiskRecommend () {
      this.baseService.post('/strategy/filterPara', JSON.parse(this.$route.query.query)).then((res) => {
        this.recommend = res.data
        this.$nextTick(() => {
          this.$refs.scroller.reset()
        })
      }).catch((err) => {
        if (err === 'timeout') this.$store.state.networkState = false
      })
    },
    drawCircular () {
      let canvas = document.getElementById('canvas')
      let width = canvas.width
      let height = canvas.height
      let ctx = canvas.getContext('2d')
      ctx.globalCompositeOperation = 'source-atop'
      ctx.imageSmoothingEnabled = true;
      if (window.devicePixelRatio) {
        let Ratio = window.devicePixelRatio * 4
				canvas.style.width = width + "px";
				canvas.style.height = height + "px";
				canvas.height = height * Ratio;
				canvas.width = width * Ratio;
				ctx.scale(Ratio, Ratio);
      }
      ctx.lineWidth = 4
      ctx.strokeStyle='white';
      let Angle = 0
      let time = 0
      let draw = () => {
        ctx.beginPath();
        Angle += 0.0335
        ctx.arc(50,50,35,-0.1*Math.PI,Angle*Math.PI);
        ctx.stroke();
        time++
        if (time === 51) {
          return
        }
        requestAnimationFrame(draw)
      }
      requestAnimationFrame(draw)
    },
    reload () {
      this.findRiskRecommend()
      this.$nextTick(() => {
        this.drawCircular()
      })
    },
    gotoDetail (item) {
      this.$router.push(
        {
          path:'/subscribe/',
          query:
          {
            id: item._id + '&' + JSON.stringify(item)
          }
        }
      )
    },
  },
  created () {
    this.fontSize = this.fontSize * document.body.offsetWidth / 320
    this.findRiskRecommend()
  },
  activated () {
    this.$refs.scroller.reset({top: 0})
  },
  mounted() {
    let vm = this
    function animate () {
      if (TWEEN.update()) {
        requestAnimationFrame(animate)
      }
    }
    new TWEEN.Tween({ tweeningNumber: 0 })
      .easing(TWEEN.Easing.Quadratic.Out)
      .to({ tweeningNumber: 100 }, 4000)
      .onUpdate(function () {
        vm.process = this._object.tweeningNumber.toFixed(0)
      })
      .start()
    animate()
  },
  filters: {
    toDBC (str) {
      var result = "";
      var len = str.length;
      for(var i=0;i<len;i++)
      {
          var cCode = str.charCodeAt(i);
          //全角与半角相差（除空格外）：65248(十进制)
          cCode = (cCode>=0x0021 && cCode<=0x007E)?(cCode + 65248) : cCode;
          //处理空格
          cCode = (cCode==0x0020)?0x03000:cCode;
          result += String.fromCharCode(cCode);
      }
      return result
    }
  }
}
</script>

<style>
.vux-spinner svg {
  width: 50px !important;
  height: 50px !important;
}
</style>

<style lang="less" scoped>
.header {
  height: 23em;
  width: 100%;
  position: relative;
  background-image: linear-gradient(135deg, #59CAFA 0%, #766FF8 47%, #AA5CEC 100%);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  .level {
    display: flex;
    flex-direction: column;
    img {
      display: block;
      height: 9em;
      width: auto;
      margin: 0 auto;
    }
    a {
      height: 1.8em;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      letter-spacing: 1px;
      border-radius: 2.5em;
      flex-direction: row;
      font-size: 1.1em;
      margin: 0em auto 3.5em auto;
    }
  }
}
.content {
  overflow: hidden;
  padding: 1em 1.5em 0 1.5em;
  > a {
    font-size: 1.2em;
    margin-bottom: 1em;
    display: block;
    color: #666666;
  }
}

.DBCProcess {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  div {
    display: inline-block;
    letter-spacing: -26px;
    transform: translate3D(-10px, 0, 0);  
  }
}

.processNum {
  font-size: 6em;
  font-weight: 500;
  color: white;
  width: 100px;
  position: relative;
  height: 100px;
  canvas {
    height: 100%;
    width: 100%;
  }
  .hookIcon {
    position: absolute;
    top: 0;
    font-size: 1.2em;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation:hook-animation 1s ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  }
  sub {
    font-size: 0.5em;
    display: inline-block;
    transform: translate3D(0, -0.3em, 0)
  }
}

@media screen and (max-width: 320px) {
  p {
      font-size: 1rem;
  }
}

.reIcon {
  display: inline-block;
  transform: translate3D(-2px, 0, 0);
}

.repeat_ {
  position: fixed;
  top: 1.9em;
  right: 0.5em;
  color: white;
  font-size: 1.2em;
  letter-spacing: 2px;
}
.goBackBtn {
  position: fixed;
  top: 0.8em;
  left: 0.4em;
  color: white;
  width: 3em;
  font-size: 2em;
}
.icon-xiangzuo1 {
}
.goBack {
  display: inline-block;
  transform: translate3D(0, -3px, 0);
}

.list-out-in {
  animation:list-out-in 1s ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes list-out-in
{
  from {
    opacity: 0;
    transform: translate3D(50%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3D(0, 0, 0);
  }
}

@keyframes hook-animation
{
  from {
    opacity: 0;
    transform: rotate(0deg) scale(0, 0)
  }
  to {
    opacity: 1;
    transform: rotate(360deg) scale(1, 1)
  }
}

</style>